<template>
	<view class='content'>
		<uni-nav-bar
		left-icon="back" 
		status-bar=true
		fixed=true
		color="#FFF"
		left-text="返回" 
		right-text="" 
		title="出行"
		background-color="#409ED7"
		@clickLeft="toback"
		></uni-nav-bar>
		<view class='wrapper'>
			<view class='baseinfo'>
				<view class='title plheight'>{{title}}</view>
				<view class="feature">特色风景</view>
				<view class='features'>
					<view class='fitem'>{{keyword}}</view>
					<!-- <view class='fitem' v-for="(item,index) in features" :key="item.index">
						{{item}}、
					</view> -->
				</view>
				<view v-if='address' class='features'>
					地址：{{address}}
				</view>
				<view class='showimg plheight'>
					<!-- <image :src="showimg"></image> -->
					<view class="swiperBox">
						<uni-swiper-dot  field="content" >
							<swiper class="swiper-box" autoplay="true" circular="true" style="height: 10rem;">
								<swiper-item v-for="(item ,index) in list" :key="index">
									<image @click="showImage" :src="item" mode="scaleToFill" style="width: 100%;height: 100%;"></image>
								</swiper-item>
							</swiper>
						</uni-swiper-dot>
					</view>
				</view>
				<view class='labels plheight'>
					<view class='litem' v-for="(item,index) in labels" :key="item.index">
						{{item.title}}
					</view> 
				</view>
				<view class='address'>
					<view>
						 <view style="font-size: 15px; width: 13rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">{{address}}</view>
						<view class="distance"><uni-icons color='#A9A9A9' type="location-filled" size="20"></uni-icons>当前距离您{{distance}}km</view>
					</view>
					<view class="navigation" @click="openMap()"><uni-icons style='margin-right: 3px;' color='#FFF' type="navigate" size="16"></uni-icons>一键导航</view>
				</view>
			</view> 
			<view class='info plheight'>
				<!-- <view class='opentime plheight'>
					<view v-if="Stime|| SStime">开放时间：</view>
					<view style="font-size: 14px;" v-if="Stime">周一至周五：{{Stime}}</view>
					<view style="font-size: 14px;" v-if="SStime">周六至周日：{{SStime}}</view>
				</view> -->
				<view>
					<view>景区简介：</view>
					<view class="desc plheight" v-html='desc'></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '@/pages/utils/api.js';
	import {uniSwiperDot} from "@/components/uni-swiper-dot/uni-swiper-dot.vue";
	export default {
		data(){
			return{
				id:'',
				typeid:'',
				navtitle:"",
				title:"",
				keyword:'',
				labels:[],
				list:[],
				address:'',
				distance:'',
				lat:'',
				lng:'',
				endlat:'',
				endlng:'',
				desc:''
			}
		},
		onLoad(option) {
			var vm = this;
			vm.id = option.id;
			vm.typeid = option.typeid;
			uni.getLocation({
			    type: 'wgs84',
			    success: function (res) {
					console.log(res)
			        vm.lat = res.latitude;
			        vm.lng = res.longitude;
					vm.getDetails();
			    }
			}); 
			// if(vm.lat && vm.lng){
			// 	 vm.getDetails();
			// }else{
			// 	uni.showToast({
			// 	    icon: 'none',
			// 	    title: '获取位置出错',
			// 		position:'bottom'
			// 	});
			// }
			
		},
		methods:{
			toback:function(){
				uni.navigateBack({
					delta: 1,
					animationType: 'pop-out',
					animationDuration: 200
				});
			},
			
			getDetails:function(){
				uni.showLoading({
				      title: '加载中...'
				  });
				var vm = this;
				api.getDetail({
					id:vm.id,
					type_id:vm.typeid,
					lat:vm.lat,
					lng:vm.lng
				}).then(data=>{
					console.log(data)
					if(data.code == 1){ 
						vm.navtitle = data.data.keyword;
						vm.title = data.data.title;
						vm.keyword = data.data.keyword;
						vm.address = data.data.address;
						vm.labels = data.data.labels;
						vm.desc = data.data.intro;
						vm.list = data.data.scenery;
						vm.distance = data.data.distance;
						vm.endlat = data.data.latitude;
						vm.endlng = data.data.longitude;
						uni.hideLoading();
					}else{
						uni.hideLoading();
						uni.showToast({
						    icon: 'none',
						    title: data.msg,
							position:'bottom'
						});
						setTimeout(function(){
							setTimeout(function(){
								vm.toback();
							},1500);
						},2000);
					}
				})
			},
			
			//图片预览
			showImage:function(){
				var vm = this;
				uni.previewImage({
				  urls: vm.list
				});
			},
			 openURL:function(url, identity ) {
			  let newurl = encodeURI(url);
			  plus.runtime.openURL( newurl, function(res){
			    uni.showModal({
			      content: res.message
			    })
			  }, identity);
			},
			 openMap(){  
						var vm = this;
			            var url = "";  
			            if (plus.os.name == "Android") {  
			                var hasBaiduMap = plus.runtime.isApplicationExist({pname:'com.baidu.BaiduMap',action:'baidumap://'});  
			                var hasAmap = plus.runtime.isApplicationExist({pname:'com.autonavi.minimap',action:'androidamap://'});  
			                var urlBaiduMap = "baidumap://map/marker?location="+ vm.endlat +","+ vm.endlng +"&title="+ vm.address +"&src=Hello%20uni-app";  
			                var urlAmap = "androidamap://viewMap?sourceApplication=Hello%20uni-app&poiname="+ vm.address +"&lat="+ vm.endlat +"&lon="+ vm.endlng +"&dev=0"  
			                if (hasAmap && hasBaiduMap) {  
			                    plus.nativeUI.actionSheet({title:"选择地图应用",cancel:"取消",buttons:[{title:"百度地图"},{title:"高德地图"}]}, function(e){  
			                        switch (e.index){  
			                            case 1:  
			                                plus.runtime.openURL(urlBaiduMap);  
			                                break;  
			                            case 2:  
			                                plus.runtime.openURL(urlAmap);  
			                                break;  
			                        }  
			                    })  
			                }  
			                else if (hasAmap) {  
			                    plus.runtime.openURL(urlAmap);  
			                }  
			                else if (hasBaiduMap) {  
			                    plus.runtime.openURL(urlBaiduMap);  
			                }  
			                else{  
			                    url = encodeURI("geo:"+ vm.endlat +","+ vm.endlng +"?q="+ vm.address +"");  
			                    plus.runtime.openURL(url); //如果是国外应用，应该优先使用这个，会启动google地图。这个接口不能统一坐标系，进入百度地图时会有偏差  
			                }  
			            } else{
			                // iOS上获取本机是否安装了百度高德地图，需要在manifest里配置，在manifest.json文件app-plus->distribute->apple->urlschemewhitelist节点下添加（如urlschemewhitelist:["iosamap","baidumap"]）  
			                plus.nativeUI.actionSheet({title:"选择地图应用",cancel:"取消",buttons:[{title:"Apple地图"},{title:"百度地图"},{title:"高德地图"}]}, function(e){  
			                    console.log("e.index: " + e.index);  
			                    switch (e.index){  
			                        case 1:  
			                            url = encodeURI("http://maps.apple.com/?q="+ vm.address +"&ll="+ vm.endlat +","+ vm.endlng +"&spn=0.008766,0.019441");  
			                            break;  
			                        case 2:  
			                            url = encodeURI("baidumap://map/marker?location="+ vm.endlat +","+ vm.endlng +"&title="+ vm.address +"&src=Hello%20uni-app");  
			                            break;  
			                        case 3:  
			                             url = encodeURI("iosamap://viewMap?sourceApplication=Hello%20uni-app&poiname="+ vm.address +"&lat="+ vm.endlat +"&lon="+ vm.endlng +"&dev=0");  
			                            break;  
			                        default:  
			                            break;  
			                    }  
			                    if (url!="") {
									console.log(url)
			                        plus.runtime.openURL( url, function( e ) {  
			                            plus.nativeUI.alert(e.message);  
			                        });  
				  
			                    }  
			                })  
			            }  
			        }
		}
	}
</script>

<style>
	.wrapper{
		padding: 0 .8rem;
	}
	.plheight{
		padding: 5px 0;
	}
	.showimg image{
		width: 100%;
		border-radius: 10px;
	}
	.title{
		font-size: 1.2rem;
		color:#414141;
	}
	.feature,.litem{
		color:#FF5B5A;
		font-size: 12px;
	}
	.features,.labels{
		display: flex;
		align-items: center;
		font-size: 12px;
	}
	.fitem{
		color:#444;
		padding: 0 5px 0 0;
	}
	.litem{
		border:1px #FF5B5A solid;
		padding: 2px 5px;
		border-radius: 4px;
		margin: 0 5px 0 0;
	}
	.address{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.distance{
		color: #989898;
		font-size: 15px;
	}
	.navigation{
		background-color: #4FA4FF;
		color: #FFF;
		font-size: 14px;
		padding: 5px 10px;
		border-radius: 3px;
	}
	.info{
		color: #777;
		line-height: 1.5rem;
	}
	.desc{
		font-size: 15px;
		line-height: 1.2rem;
		text-indent: 2em;
		
	}
	.desc img{
		max-width: 90%;
	}
	.desc iframe{
		max-width: 90%;
		margin-left: -.5rem;
	}
</style>
